<template>
	<view>
			<view class="warp" v-if="modaishow">
				<view class="warp-view">
					<view class="warp-text">请登陆后再操作</view>
					<view class="warp-flex">
						<button @click="messcancel()" plain="true">取消</button>
						<button plain="true" open-type="getUserInfo" @click="getUserInfo()">登录</button>
					</view>
				</view>
			</view>
			<!-- 提示组件 -->
			<HMmessages ref="HMmessages" @complete="HMmessages = $refs.HMmessages" @clickMessage="clickMessage"></HMmessages>
		</view>
</template>

<script>
	var {log} = console
	import {publicing} from '../api/api.js'
	import {wxloginurl} from '../api/request.js'
	// 引入提示组件
	 import HMmessages from "@/components/HM-messages/HM-messages.vue"
	export default{
		components:{
			HMmessages
		},
		data(){
			return{
				modaishow:false
			}
		},
		methods:{
			// 显示
			init(){
				this.modaishow=true
			},
			// 取消
			messcancel(){
				this.modaishow=false
			},
			
			// 登录
			getUserInfo(){
				wx.getUserProfile({
					desc:'登录'
				}).then((res)=>{
					let userInfo=res.userInfo
					userInfo.nickName='木头'
					let avatarUrl=userInfo.avatarUrl
					let nickName=userInfo.nickName
					// log(nickName)
					this.wxCode(avatarUrl,nickName)
				}).catch((err)=>{
					console.log('拒绝登录或登录失败')
				})
			},
			// 获取code码
			wxCode(avatarUrl,nickName){
				wx.login({
					success:res=>{
						log(res)
						let code=res.code
						this.wxLogin(avatarUrl,nickName,code)
					},
					fail:err=>{
						log(err)
					}
				})
			},
			// 发送请求后端登录
			wxLogin(avatarUrl,nickName,code){
				let data={
					avatarUrl,nickName,code,
					appid:'wx99ca80b3b029aff8',
					secret:'4f67c2e72b8b41f8a52112efa2e62e64',
				}
				publicing(wxloginurl,data).then(res=>{
					if(res.data.msg=="success"){
						// 存入本地
						let data=res.data.datas
						data.nickName="木头"
						uni.setStorageSync('usermen',data)
						let succ= '登录成功'
						let ico='success'
						this.tIps(succ,ico)
						this.messcancel()
					}
				}).catch(err=>{
					log(err)
					let succ= '登录失败'
					let ico='error'
					this.tIps(succ,ico)
					this.messcancel()
				})
			},
			
			// 提示
			tIps(succ,ico){
			this.HMmessages.show(succ,{icon:ico,fontColor:'#ffffff',iconColor:'#ffffff',background:'rgba(102,0,51,0.8)'});
			}
		}
	}
</script>

<style scoped lang="less">
	// 模态弹窗布局
	.warp{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0,0,0,0.6);
		z-index: 9999;
		.warp-view{
			width: 500upx;
			height: 200upx;
			background: #fff;
			margin: auto;
			position: absolute;
			top: 0;
			left: 0;
			bottom:0;
			right: 0;
			border-radius: 8upx;
			overflow: hidden;
			.warp-text{
				text-align: center;
				margin-top: 30upx ;
				font-size: 34upx;
				color: #666666;
			}
			.warp-flex{
				display: flex;
				justify-content: space-around;
				border-top: 1upx solid #eeeeee;
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 80upx;
				line-height: 80upx;
				button{
					border: none;
					font-size: 30upx;
				}
			}
		}
	}
</style>
